<template>
    <div>
        <el-card>
            <el-button type="primary" icon="el-icon-plus" @click="add">添加系统参数</el-button>
            <br>
            <br>
            <!-- 主体部分的表格 -->
            <el-table :data="tableData" style="width: 100%" :current-row-key="tableData.id">
                <el-table-column
                    type="index"
                    label="编号"
                    width="50"
                >
                </el-table-column>
                <el-table-column label="字典码">
                    <template slot-scope="slotProps">
                        {{slotProps.row.dicKey}}
                    </template>
                </el-table-column>
                <el-table-column label="字典值">
                    <template slot-scope="slotProps">
                        {{slotProps.row.dicValue}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template slot-scope="slotProps">
                        <el-button type="primary" size="mini" title="编辑" icon="el-icon-edit" @click="edit(slotProps.$index)"></el-button>
                        <el-button type="danger" size="mini" title="删除" icon="el-icon-delete" @click="del(slotProps.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <!-- 底部翻页器 -->
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :pager-count="5"
                    :total="page.total"
                    :page-size="page.pageSize"
                    :current-page="page.currentPage"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </el-card>
        <!-- 点击删除的弹出框 -->
        <el-dialog
            :title="dialog.del.title"
            :visible.sync="dialog.del.show"
            width="400px"
            center
        >
            <span>{{dialog.del.content}}</span>
            <span slot="footer">
                <el-button @click="dialog.del.show = false">取 消</el-button>
                <el-button type="primary" @click="delSure">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击添加、编辑的弹出框 -->
        <el-dialog
            :title="dialog.isEdit?'编辑':'添加'"
            :visible.sync="dialog.show"
            @close="handleDialogClose(`formData`)"
            width="700px"
            center
        >
            <el-form ref="formData" :rules="ruleForm" :model="formData" label-width="80px">
                <el-form-item label="字典码" prop="dicKey">
                    <el-input placeholder="请输入字典码" v-model="formData.dicKey"></el-input>
                </el-form-item>
                <el-form-item label="字典值" prop="dicValue">
                    <el-input placeholder="请输入字典值" v-model="formData.dicValue"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialog.show = false">取 消</el-button>
                    <el-button type="primary" @click="dialogSure('formData')">{{dialog.isEdit?"保 存":"添 加"}}</el-button>
                    <el-button @click="resetForm('formData')">重 置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      tableData: [],
      page: {
        total: 10,
        pageSize: 10,
        currentPage: 1
      },
      dialog: {
        isEdit: false,
        show: false,
        editIndex: '',
        del: {
          title: '删除',
          show: false,
          content: '',
          index: ''
        }
      },
      formData: {}, // 表单中的数据
      ruleForm: { // 表单验证
        dicKey: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        dicValue: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 翻页器
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    // 初始化列表
    getList(current) {
      request.get('/sys/dictionary/page', { params: {
        size: this.page.pageSize,
        current: this.page.currentPage
      }}).then(res => {
        this.tableData = res.content.records
        this.page.total = res.content.total
      })
    },
    // 根据id查询详细信息
    getListById(id) {
      request.get(`/sys/dictionary/${id}`).then(res => {
        const { dicKey, dicValue } = { ...res.content }
        this.formData = { dicKey, dicValue }
      })
    },
    // 删除
    del(index) {
      this.dialog.del.show = true
      this.dialog.del.index = index
      this.dialog.del.content = `确定删除${this.tableData[index].dicKey}吗？`
    },
    delSure() {
      request.delete(`/sys/dictionary/${this.tableData[this.dialog.del.index].id}`).then(res => {
        if (res.code === 0) {
          this.getList()
        } else {
          this.$message.error(res.content)
        }
        this.dialog.del.show = false
      })
    },
    // 添加
    add() {
      this.dialog.show = true
      this.dialog.isEdit = false
    },
    // 编辑
    edit(index) {
      this.dialog.show = true
      this.dialog.isEdit = true
      this.dialog.editIndex = index
      this.getListById(this.tableData[index].id)
    },
    dialogSure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.dialog.isEdit) { // 添加操作
            request.post('/sys/dictionary', {
              ...this.formData
            }).then(res => {
              if (res.code === 0) {
                this.getList()
              } else {
                this.$message.error(res.content)
              }
            })
          } else { // 编辑操作
            request.put('/sys/dictionary', {
              id: this.tableData[this.dialog.editIndex].id,
              ...this.formData
            }).then(res => {
              if (res.code === 0) {
                this.getList()
              } else {
                this.$message.error(res.content)
              }
            })
          }
          this.dialog.show = false
        }
      })
    },
    // 弹框关闭时的回调
    handleDialogClose(formName) {
      this.resetForm(formName)
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin-bottom: 15px;
}
</style>
